<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>使用bootstrap源码，进行修改并重新编译使用</title>
    <!--<link rel="stylesheet" href="./bootstrap-custom/dist/css/bootstrap.css">-->
    <link rel="stylesheet" href="./bootstrap-custom.css">
</head>
<body>
    <h1 class="title col-sm-6 offset-sm-3 col-12">注册</h1>
    <form id="myForm" class="col-sm-6 offset-sm-3 col-12">
        <div class="form-group form-row">
            <label class="col-form-label col-2">姓名</label>
            <input class="form-control col-10" name="name" type="text"/>
        </div>
        <div class="form-group form-row">
            <label class="col-form-label col-2">密码</label>
            <input class="form-control col-10" name="password" type="password"/>
        </div>
        <div class="form-group form-row">
            <label class="col-form-label col-2">电话</label>
            <input class="form-control col-10" name="cellphone" type="text"/>
        </div>
        <div class="form-group form-row">
            <label class="col-form-label col-2">地址</label>
            <input class="form-control col-10" name="address" type="text"/>
        </div>
        <div id="result" class="alert alert-danger">

        </div>
        <div class="form-group form-row operate">
            <button class="btn btn-primary" type="submit">提交</button>
        </div>
    </form>
    <script>
        var form = document.querySelector('#myForm');
        var result = document.querySelector('#result');
        form.addEventListener('submit', function (e) {
            if (!document.querySelector('[name=password]').value) {
                result.style.display = 'block';
                result.innerHTML = '密码为空';
            } else {
                result.style.display = 'none';
            }
            e.preventDefault();
        });
    </script>
</body>
</html>